import React, {Component} from 'react';
import {
    StyleSheet, 
    View,
    Text,
    Image,
    TextInput,
    TouchableOpacity,
    ScrollView,
    SafeAreaView,
    DeviceEventEmitter,
    BackHandler,
} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import DeviceInfo from 'react-native-device-info';
import { Formik } from 'formik';
import { RRCLoading, RRCToast, RRCAlert } from 'react-native-overlayer';
import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';
import {check, PERMISSIONS, RESULTS} from 'react-native-permissions';
import HttpUtil from '../util/HttpUtil';
import BaseComponent from '../component/BaseComponent'
import BrandModelTree from '../component/BrandModelTree';
import TypeTree from '../component/TypeTree';
import RoomTree from '../component/RoomTree';
import BranchTree from '../component/BranchTree';
import UserTree from '../component/UserTree';
import Rack from '../component/Rack';
import RfidModule from '../component/Rfid';
import Reason from '../component/Reason';
import UserSelectModal from '../component/UserSelectModal';
import InfraredModule from '../component/Infrared';
//import KeyEvent from 'react-native-keyevent';
import {NavigationEvents} from 'react-navigation';



let baseFlag, dataFlag = false; 
let alertFlag = '';

const re = /^\+?[0-9][0-9]*$/;

let that = null;

export default class AssetDetail extends BaseComponent {

    constructor(props){
        super(props);
        this.state = {
            showReasonModal: false,
            showBrandModelModal: false,
            showTypeModal: false,
            showRoomModal: false,
            showManageBranchModal: false,
            showUseBranchModal: false,
            showManageUserModal: false,
            showUseUserModal: false,
            showScanModal: false,
            showRackModal: false,
            userList:[],
            selectUserList: [],
            brandModeList: [],
            moveReasonList: [],
            typeList:[],
            roomList:[],
            cabinetList: [],
            racks: [],
            branchList:[],
            status: '',
            curStatus:'',
            statusName: '',
            assetNoShow: '',
            assetNo: '',
            assetName: '',
            modelId: '',
            modelName: '',
            reasonName: '',
            reasonId: '',
            typeName: '',
            typeId: '',
            serialNo: '',
            rfidNo: '',
            startU: '',
            brandId: '',
            roomName: '',
            roomId: '',
            dataceneterId: '',
            manageBranchName: '',
            manageBranchId:'',
            manageUserName:'',
            manageUser:'',
            useBranchName: '',
            useBranchId:'',
            endUserName:'',
            endUser:'',
            price: 0.0,
            remark: '',
            //ip: '',
            assetSource: '',
            imgPath: '',
            realRoomId: '',
            contractNo: '',
            expirationTime: '',
            buyTime: '',
            rackId: '',
            rackName: '',
            roomType: '',
            inputFocusName: '',
            usePersonId: '',
            usePersonDeptName:'',
            usePersonName:'',
            usePersonNo:'',
            usePersonPhone:'',
            datacenterId:'',
            statusShowColor:'#4A69DD',
            pn:'',
            location:'',
        }
        that = this;
    }

    onBackClicked = () => {
        const { params } = this.props.navigation.state;
        if(alertFlag){
            RRCAlert.hide(alertFlag);
            alertFlag = '';
        }
        
        if(params.backName){
            if(params.backName=='InstallEquipment'){
                this.props.navigation.navigate(params.backName, { tab: 0 });
            }else if(params.backName=='initCard'){
                this.props.navigation.navigate('Asset', { tab: 1 });
            }
        }else {
           this.props.navigation.navigate('Asset', { tab: 0 });
        }
        this.props.navigation.state.params.callBack();
        return true;
    }

    back = () =>{
        const { params } = this.props.navigation.state;
        if(alertFlag){
            RRCAlert.hide(alertFlag);
            alertFlag = '';
        }
        if(params.backName){
            if(params.backName=='InstallEquipment'){
                this.props.navigation.navigate(params.backName, { tab: 0 });
            }else if(params.backName=='initCard'){
                this.props.navigation.navigate('Asset', { tab: 1 });
            }
        }else {
           this.props.navigation.navigate('Asset', { tab: 0 });
        }
        this.props.navigation.state.params.callBack();
    }

    componentDidMount() {
        RRCLoading.setLoadingOptions({
            text: '加载中',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
            loadingTextStyle: {}
        })
         
        RRCLoading.show();
        this.init();
        this.fetchData();
    }

    infraredReceived(code){
        console.log(code[0]+'/'+that.state.curInput);
        if(that.state.curInput === 'assetNo'){
            that.setState({
                assetNo: code[0],
                rfidNo: code[0],
            });
            that.rfidInput.focus();
        }else if(that.state.curInput === 'serialNo'){
            that.setState({
                serialNo: code[0],
            });
            that.pnInput.focus();
        }else if(that.state.curInput === 'rfidNo'){
            that.setState({
                rfidNo: code[0],
            });
        }else if(that.state.curInput === 'pn'){
            that.setState({
                pn: code[0],
            });
            that.assetCodeInput.focus();
        }
    }

    rfidInit(){
        if(DeviceInfo.getDeviceId() === 'rk30sdk'){
            InfraredModule.init();
            this.infraredListener = DeviceEventEmitter.addListener('onInfraredReveice', this.infraredReceived);

            if(RfidModule.getState() === 'uninit')
            {
                RfidModule.init(); // rfid设备初始化
            }
            //console.log('注册按键事件');
            // KeyEventKeyEvent.onKeyDownListener((keyEvent) => {
            //     //console.log('按键='+keyEvent.keyCode)
            //     if(keyEvent.keyCode === 134){
            //         console.log('开启扫描' +　that.state.rfidNo);
            //         RfidModule.find(that.state.rfidNo);
            //     }
            // });

            this.keyListener = DeviceEventEmitter.addListener('keydown', function(e) {

                //alert('keycode: ' + e.which)
                if(e.which === 134){
                    // console.log('开启扫描111')
                    console.log(that.state.rfidNo)
                    RfidModule.find(that.state.rfidNo);
                }
                //console.log('keycode: ' + e.which)
            });
        }
    }
   
    componentWillUnmount() {
        if(DeviceInfo.getDeviceId() === 'rk30sdk'){
            if(RfidModule.getState() === 'init')
            {
                RfidModule.destory();
            }
            //console.log('destory');
            if(this.keyListener){
                //console.log('keyListener.remove');
                this.keyListener.remove();
            }


            if(InfraredModule.getState() === 'init'){
                InfraredModule.destory();
            }
            if(this.infraredListener){
                this.infraredListener.remove();
                //console.log('释放了详情页的红外监听');
            }
        }
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener("hardwareBackPress", this.onBackClicked);
        }
    }

    init = () => {
        HttpUtil.post('basicData', null)
        .then(result => {         
            if(result.httpCode == 200){
                //console.log(result);

                this.setState({
                    brandModeList: result.data.brandModelTree,
                    typeList: result.data.typeVo,
                    roomList: result.data.datacenterRoomTree,
                    branchList: result.data.departmentTree,
                    userList: result.data.userList,
                    cabinetList: result.data.cabinetList,
                    moveReasonList: result.data.moveReasonList,
                });

                baseFlag = true;
                if(baseFlag && dataFlag){
                    RRCLoading.hide();
                }
            }else{
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 3000);
            }
        })
        .catch(error => {
            RRCLoading.hide();
            RRCToast.show('系统异常', 1, 3000);
        })
    }

    handleChange = (field) => {
        this.setState(field);
    }

    fetchData = () => { 

        const { params } = this.props.navigation.state;
        const id = params ? params.id : null;

        let args = {
            assetId: id,
        }

        HttpUtil.post('assetData', args)
        .then(result => { 
            if(result.httpCode == 200){
                //console.log(result);
                this.setState({
                    assetNo: result.data.assetNo,
                    assetNoShow: result.data.assetNo,
                    assetName: result.data.assetName,
                    modelId: result.data.modelId_,
                    modelName: result.data.modelName,   
                    typeName: result.data.typeName, 
                    brandId:  result.data.brandId_,
                    typeId:result.data.typeId_, 
                    //rackId:result.data.rackId_, 
                    reasonId: result.data.status,
                    reasonName: result.data.reasonName                                ,
                    //rackName:result.data.rackName,
                    serialNo: result.data.serialNo,
                    pn:result.data.pn,
                    rfidNo: result.data.rfidNo,
                    //startU: result.data.startU,
                    roomId: result.data.roomId_,
                    roomName: result.data.roomName,
                    roomType: result.data.roomType,
                    dataceneterId: result.data.dataceneterId_,
                    manageBranchName: result.data.manageBranchName,
                    manageBranchId:result.data.manageBranchId_,
                    manageUserName:result.data.manageUserName,
                    manageUser:result.data.manageUser,
                    useBranchName: result.data.useBranchName,
                    useBranchId:result.data.useBranchId_,
                    endUserName:result.data.endUserName,
                    endUser:result.data.endUser,
                    status: result.data.status,
                    statusShowColor:result.data.statusShowColor,
                    curStatus:result.data.status,
                    statusName: result.data.statusName,
                    price: result.data.price,
                    remark: result.data.remark,
                    //ip: result.data.ip,
                    assetSource: result.data.assetSource,
                    imgPath: result.data.imgPath,
                    realRoomId: result.data.realRoomId_,
                    contractNo: result.data.contractNo,
                    expirationTime: result.data.expirationTime,
                    buyTime: result.data.buyTime,
                    usePersonId: result.data.usePersonId,
                    usePersonDeptName:result.data.usePersonDeptName,
                    usePersonName:result.data.usePersonName,
                    usePersonNo:result.data.usePersonNo,
                    usePersonPhone:result.data.usePersonPhone,
                    location: result.data.location,
                });
                dataFlag = true;
                if(baseFlag && dataFlag){
                    RRCLoading.hide();
                }
                RRCLoading.hide();
                //console.log(JSON.stringify(this.state));
            }else{
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 2000);
            }
        })
        .catch(error => {
            RRCLoading.hide();
            RRCToast.show('系统异常', 1, 2000);
        })
        
    }

    openBrandModelModal = () => {
        this.setState({
            showBrandModelModal: true,
        });
    }

    closeBrandModelModal = () => {
        this.setState({
            showBrandModelModal: false,
        });
    }

    openTypeModal = () => {
        this.setState({
            showTypeModal: true,
        });
    }

    closeTypeModal = () => {
        this.setState({
            showTypeModal: false,
        });
    }

    openRoomModal = () => {
        this.setState({
            showRoomModal: true,
        });
    }

    closeRoomModal = () => {
        this.setState({
            showRoomModal: false,
        });
    }

    openManageBranchModal = () => {
        this.setState({
            showManageBranchModal: true,
        });
    }

    closeManageBranchModal = () => {
        this.setState({
            showManageBranchModal: false,
        });
    }

    openUseBranchModal = () => {
        this.setState({
            showUseBranchModal: true,
        });
    }

    closeUseBranchModal = () => {
        this.setState({
            showUseBranchModal: false,
        });
    }

    openManageUserModal = () => {
        let selectUserList = [];
        this.state.userList.forEach((value) => {
            //console.log(value.name);
            if(this.state.manageBranchId == value.deptId_){
                selectUserList.push(value);
            }
        });
        this.setState({
            selectUserList: selectUserList,
            showManageUserModal: true,
        });
    }

    closeManageUserModal = () => {
        this.setState({
            showManageUserModal: false,
        });
    }

    openUseUserModal = () => {
        let selectUserList = [];
        this.state.userList.forEach((value) => {
            //console.log(value.name);
            if(this.state.useBranchId == value.deptId_){
                selectUserList.push(value);
            }
        });
        this.setState({
            selectUserList: selectUserList,
            showUseUserModal: true,
        });
    }

    closeUseUserModal = () => {
        this.setState({
            showUseUserModal: false,
        });
    }
    

    selectBrandModel = (model) => {

        if(model.isModel){
            this.setState({
                modelName: model.label,
                modelId: model.value,
                brandId: model.brandId,
                showBrandModelModal: false,
            });
        }
        
    }

    selectType = (type) => {
        this.setState({
            typeName: type.name,
            typeId: type.id_,
            showTypeModal: false,
        });
    }

    selectRoom = (room) => {
        if(room.isRoom){
            this.setState({
                roomName: room.label,
                roomId: room.value,
                roomType: room.roomType,
                dataceneterId: room.dataceneterId,
                showRoomModal: false,
            });
        }
        // if(room.roomType==1){
        //     let racks = [];
        //     this.state.cabinetList.forEach((value) => {
        //         if(room.value == value.roomId_){
        //             racks.push(value);
        //         }
        //     });
        //     this.setState({
        //         racks: racks,
        //         rackId: '',
        //         rackName: '',
        //     }); 
        // }
    }

    selectManageBranch = (branch) => {
        // if(branch.isEnd){
            this.setState({
                manageBranchName: branch.name,
                manageBranchId: branch.id_,
                showManageBranchModal: false,
                manageUserName:'',
                manageUser: '',
            });
        // } 
    }

    selectUseBranch = (branch) => {
        //if(branch.isEnd){
            this.setState({
                useBranchName: branch.name,
                useBranchId: branch.id_,
                showUseBranchModal: false,
                endUserName:'',
                endUser: '',
            });
        //} 
    }

    selectManageUser = (user) => {
        this.setState({
            manageUserName: user.name,
            manageUser: user.id_,
            showManageUserModal: false,
        });
    }

    selectUseUser = (user) => {
        this.setState({
            endUserName: user.name,
            endUser: user.id_,
            showUseUserModal: false,
        });
    }
    openPnScan = () => {
        DeviceInfo.isCameraPresent()
        .then(isCameraPresent => {
            if((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk'){
                this.props.navigation.navigate('QBarCodeScan', {
                    isGoBack: true,
                    isHaveCamera: true,
                    isRfid: false, 
                    callBack: ( code ) => {
                        this.setState({
                            pn: code,
                        });
                        setTimeout(() => {
                            that.assetCodeInput.focus();
                        }, 1000);
                        
                    }        
                });
            }else if(isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk'){
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                pn: code,
                            });
                            setTimeout(() => {
                                that.assetCodeInput.focus();
                            }, 1000);
                        }        
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }else{
                 if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: false,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                pn: code,
                            });
                            setTimeout(() => {
                                that.assetCodeInput.focus();
                            }, 1000);
                        }     
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }
        })
        .catch(cameraAccessException => {
            RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
            return;
        });
    }

    openSnScan = () => {
        DeviceInfo.isCameraPresent()
        .then(isCameraPresent => {
            if((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk'){
                this.props.navigation.navigate('QBarCodeScan', {
                    isGoBack: true,
                    isHaveCamera: true,
                    isRfid: false, 
                    callBack: ( code ) => {
                        this.setState({
                            serialNo: code,
                        });
                        setTimeout(() => {
                            that.pnInput.focus();
                        }, 1000);
                        
                    }        
                });
            }else if(isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk'){
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                serialNo: code,
                            });
                            setTimeout(() => {
                                that.pnInput.focus();
                            }, 1000);
                        }        
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }else{
                 if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: false,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                serialNo: code,
                            });
                            setTimeout(() => {
                                that.pnInput.focus();
                            }, 1000);
                        }     
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }
        })
        .catch(cameraAccessException => {
            RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
            return;
        });
        
    }

    openAssetNoScan = () => {
        DeviceInfo.isCameraPresent()
        .then(isCameraPresent => {
            if((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk'){
                this.props.navigation.navigate('QBarCodeScan', {
                    isGoBack: true,
                    isHaveCamera: true,
                    isRfid: false, 
                    callBack: ( code ) => {
                        this.setState({
                            assetNo: code,
                            rfidNo: code,
                        });
                        setTimeout(() => {
                            that.rfidInput.focus();
                            }, 1000);
                        }        
                });
            }else if(isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk'){
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                assetNo: code,
                                rfidNo: code,
                            });
                            setTimeout(() => {
                                that.rfidInput.focus();
                            }, 1000);
                        }        
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }else{
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: false,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                assetNo: code,
                                rfidNo: code,
                            });
                            setTimeout(() => {
                                that.rfidInput.focus();
                            }, 1000);
                        }     
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }
        })
        .catch(cameraAccessException => {
            RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
            return;
        });        
    }

    openRfidNoScan = () => {
        DeviceInfo.isCameraPresent()
        .then(isCameraPresent => {
            if((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk'){
                this.props.navigation.navigate('QBarCodeScan', {
                    isGoBack: true,
                    isHaveCamera: true,
                    isRfid: false, 
                    callBack: ( code ) => {
                        this.setState({
                            rfidNo: code,
                        });
                        // setTimeout(() => {
                        //     that.assetCodeInput.focus();
                        // }, 1000);
                       
                    }        
                });
            }else if(isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk'){
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                rfidNo: code,
                            });
                            // setTimeout(() => {
                            //     that.assetCodeInput.focus();
                            // }, 1000);
                        }        
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }else{
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: false,
                        isRfid: true, 
                        callBack: ( code ) => {
                            this.setState({
                                rfidNo: code,
                            });
                            // setTimeout(() => {
                            //     that.assetCodeInput.focus();
                            // }, 1000);
                        }     
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }
        })
        .catch(cameraAccessException => {
            RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
            return;
        });        
    }

    openRackModal = () => {
        this.setState({
            showRackModal: true,
        });
    }

    closeRackModal = () => {
        this.setState({
            showRackModal: false,
        });
    }

    selectRack = ( rack ) => {
        this.setState({
            rackId: rack.id_,
            rackName: rack.assetName,
            showRackModal: false,
        });
    }

    selectImg = () => {
        if(alertFlag !== ''){
            return;
        }
        alertFlag = RRCAlert.alert('图片选择', '', [{
            text: '相册',
          }, {
            text: '照相机',
          },{
            text: '取消',  
          }], (index) => {
            if(index == 0){
                if(Platform.OS === 'android'){
                    check(PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE).then(result => {
                        if(result !== RESULTS.GRANTED){
                            RRCToast.show('未授权读取相册，请到手机设置开启本APP文件读取权限', 2, 3000);
                            if(alertFlag){
                                RRCAlert.hide(alertFlag);
                                alertFlag = '';
                            }
                            return;
                        }
                    });
                }else{
                    check(PERMISSIONS.IOS.PHOTO_LIBRARY).then(result => {
                        if(result !== RESULTS.GRANTED){
                            RRCToast.show('未授权读取相册，请到手机设置开启本APP相册读取权限', 2, 3000);
                            if(alertFlag){
                                RRCAlert.hide(alertFlag);
                                alertFlag = '';
                            }
                            return;
                        }
                    });
                }
                alertFlag = '';
                ImagePicker.openPicker({
                    width: getPixel(400),
                    height: getPixel(400),
                    cropping: true,
                    includeBase64: true,
                    cropperChooseText: '选择',
                    cropperCancelText: '取消',

                }).then(image => {
                    RRCLoading.setLoadingOptions({
                        text: '图片上传中',
                        loadingBackgroundColor: 'rgba(0,0,0,0.0)',
                        loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
                        loadingTextStyle: {}
                    })
                    RRCLoading.show();
                    let params = { 
                        assetId: this.props.navigation.state.params.id,
                        baseImg: image.data,
                    }
                    HttpUtil.post('uploadImg', params)
                    .then(result => {       
                        if(result.httpCode == 200){
                            RRCLoading.hide();
                            RRCToast.show('上传成功', 2, 3000);
                            this.setState({
                                imgPath: result.data,
                            });
                        }else{
                            RRCLoading.hide();
                            RRCToast.show('系统异常', 1, 3000);
                        }
                    })
                    .catch(error => {
                        //console.log(error);
                        RRCLoading.hide();
                        RRCToast.show('系统异常', 1, 3000);
                    })
                })
                .catch(error => {
                    
                });
            }else if(index == 1){
                if(Platform.OS === 'android'){
                    check(PERMISSIONS.ANDROID.CAMERA).then(result => {
                        if(result !== RESULTS.GRANTED){
                            RRCToast.show('未授权使用相机，请到手机设置开启本APP相机权限', 2, 3000);
                            if(alertFlag){
                                RRCAlert.hide(alertFlag);
                                alertFlag = '';
                            }
                            return;
                        }
                    });
                }else{
                    check(PERMISSIONS.IOS.CAMERA).then(result => {
                        if(result !== RESULTS.GRANTED){
                            RRCToast.show('未授权使用相机，请到手机设置开启本APP相机权限', 2, 3000);
                            if(alertFlag){
                                RRCAlert.hide(alertFlag);
                                alertFlag = '';
                            }
                            return;
                        }
                    });
                }
                alertFlag = '';
                ImagePicker.openCamera({
                    width: getPixel(400),
                    height: getPixel(400),
                    cropping: true,
                    includeBase64: true,
                    cropperChooseText: '选择',
                    cropperCancelText: '取消',
                }).then(image => {
                    RRCLoading.setLoadingOptions({
                        text: '图片上传中',
                        loadingBackgroundColor: 'rgba(0,0,0,0.0)',
                        loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
                        loadingTextStyle: {}
                    })
                    RRCLoading.show();
                    let params = { 
                        assetId: this.props.navigation.state.params.id,
                        baseImg: image.data,
                    }
                    HttpUtil.post('uploadImg', params)
                    .then(result => {       
                       
                        if(result.httpCode == 200){
                            RRCLoading.hide();
                            RRCToast.show('上传成功', 2, 3000);
                            this.setState({
                                imgPath: result.data,
                            });
                        }else{
                            RRCLoading.hide();
                            RRCToast.show('系统异常', 1, 3000);
                        }
                    })
                    .catch(error => {
                        //console.log("openCamera catch" + err.toString());
                        RRCLoading.hide();
                        RRCToast.show('系统异常', 1, 3000);
                    })
                })
                .catch(error => {
                    
                });
            }else{
                if(alertFlag){
                    RRCAlert.hide(alertFlag);
                    alertFlag = '';
                }
            }
        })
    }

    submit = (values) => {  
        //console.log(JSON.stringify(this.state));
        if(!this.state.assetName){
            RRCToast.show('请填写设备名称', 2, 3000);
            return;
        }
        if(this.state.assetName.length > 30){
            RRCToast.show('设备名称长度不能超过30个字符', 2, 3000);
            return;
        }
        // if(!this.state.assetNo){
        //     RRCToast.show('请填写设备资产编号', 2, 3000);
        //     return;
        // }
        if(this.state.assetNo && this.state.assetNo.length > 30){
            RRCToast.show('设备编号长度不能超过30个字符', 2, 3000);
            return;
        }
        if(!this.state.serialNo){
            RRCToast.show('请填写设备序列号', 2, 3000);
            return;
        }
        if(this.state.serialNo.length > 30){
            RRCToast.show('设备序列号长度不能超过30个字符', 2, 3000);
            return;
        }
        // if(!this.state.rfidNo){
        //     RRCToast.show('请填写设备RFID号', 2, 3000);
        //     return;
        // }
        if(this.state.rfidNo && this.state.rfidNo.length > 30){
            RRCToast.show('设备RFID号长度不能超过30个字符', 2, 3000);
            return;
        }
        //console.log(this.state.modelId);
        if(!this.state.modelId){
            RRCToast.show('请选择设备型号', 2, 3000);
            return;
        }
        if(!this.state.typeId){
            RRCToast.show('请选择设备类型', 2, 3000);
            return;
        }
        // if(!this.state.roomId){
        //     RRCToast.show('请选择区域位置', 2, 3000);
        //     return;
        // }
        // if(this.state.roomType == 1){
        //     if(!this.state.rackId){
        //         RRCToast.show('请选择机柜', 2, 3000);
        //         return;
        //     }
        //     if(!this.state.startU){
        //         RRCToast.show('请填写起始U位', 2, 3000);
        //         return;
        //     }
        //     if(!re.test(this.state.startU)){
        //         RRCToast.show('起始U位只支持数字格式', 2, 3000);
        //         return;
        //     }
        // }
        // if(!this.state.manageBranchId){
        //     RRCToast.show('请选择管理部门', 2, 3000);
        //     return;
        // }
        // if(!this.state.useBranchId){
        //     RRCToast.show('请选择使用部门', 2, 3000);
        //     return;
        // }
        
        RRCLoading.setLoadingOptions({
            text: '请稍候',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
            loadingTextStyle: {}
        })
        RRCLoading.show();
        let assetParams = { 
            assetId: this.props.navigation.state.params.id,
            values: {   
                assetName: this.state.assetName,
                assetNo: this.state.assetNo,
                modelId:  this.state.modelId,
                typeId: this.state.typeId,
                serialNo: this.state.serialNo,
                pn:this.state.pn,
                rfidNo: this.state.rfidNo,
                roomId: this.state.roomId,
                rackId: this.state.rackId,
                startU: this.state.startU,
                brandId: this.state.brandId,
                // status: this.state.reasonId,
                dataceneterId: this.state.dataceneterId,
                manageBranchId: this.state.manageBranchId,
                manageUser: this.state.manageUser,
                useBranchId: this.state.useBranchId,
                endUser: this.state.endUser,
                status: this.state.status,
                price: this.state.price,
                remark: this.state.remark,
                //ip: this.state.ip,
                assetSource: this.state.assetSource,
                imgPath: this.state.imgPath,
                realRoomId: this.state.realRoomId,
                contractNo: this.state.contractNo,
                expirationTime: this.state.expirationTime,
                buyTime: this.state.buyTime,
                rackId: this.state.rackId,
                location: this.state.location,
            },
        };
        // console.log(JSON.stringify(params));
        HttpUtil.post('asset/update', assetParams)
        .then(result => {         
            if(result.httpCode == 200){
                RRCLoading.hide();
                RRCToast.show('修改成功', 2, 3000);
                const { params } = this.props.navigation.state;
                if(params.backName){
                    if(params.backName=='InstallEquipment'){
                        this.props.navigation.navigate(params.backName, { tab: 0 });
                    }else if(params.backName=='initCard'){
                        this.props.navigation.navigate('Asset', { tab: 1 });
                    }
                }else {
                   this.props.navigation.navigate('Asset', { tab: 0 });
                }
                this.props.navigation.state.params.callBack();
            }else if(result.httpCode == 409){
                RRCLoading.hide();
                RRCToast.show(result.msg, 1, 3000);
            }else{
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 3000);
            }
        })
        .catch(error => {
            RRCLoading.hide();
            RRCToast.show('系统异常', 1, 3000);
        })

    }

    openReasonModal = () => {
        this.setState({
            showReasonModal: true,
        });
    }

    closeReasonModal = () => {
        this.setState({
            showReasonModal: false,
        });
    }

    selectReason = ( reason ) => {
        this.setState({
            showReasonModal: false,
        })
        if(reason.id_=='3' && this.state.curStatus!='2' && this.state.curStatus!='3'){
            RRCToast.show('资产未装机不能交付', 2, 3000);
            return false;
        }
        this.setState({
            statusName: reason.showName,
            status: reason.id_,
        });
    }

    
    setInput = (name) => {
        this.setState({
           curInput: name,
        });
    }

    render() {
        const { params } = this.props.navigation.state;
        console.log(params)
        const isInfoSupplement = params && params.isInfoSupplement ? params.isInfoSupplement:false;
        return (
            <Formik
                initialValues={{}}
                onSubmit={values => this.submit(values)}
            >
                {({ handleChange, setFieldValue, handleBlur, handleSubmit, values }) => (
                    <SafeAreaView style={styles.container}>
                        <NavigationEvents onDidFocus={() => this.rfidInit()} onDidBlur={() => this.componentWillUnmount()} />
                        <View style={styles.header}>
                            <View style={{ width: getPixel(40), justifyContent: 'center', alignItems: 'center' }}>
                                <TouchableOpacity onPress={() => this.back()}>
                                    <Image source={require('../images/back.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                </TouchableOpacity>
                            </View>
                            <View style={{ width: getScreenWidth() - getPixel(80), justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: getPixel(17), color: '#333' }}>资产详情</Text>
                            </View>
                            <View style={{ width: getPixel(40), justifyContent: 'center', alignItems: 'center' }}>
                            </View>
                        </View>
                        <ScrollView>
                            <View style={{ backgroundColor: '#FFF', padding: getPixel(15), marginTop: getPixel(10) }}>
                                <View style={{ resizeMode: 'contain', flexDirection:'row',justifyContent:'space-between'}}>
                                    <View style={{flexDirection:'column'}}>
                                        <View style={{flexDirection:'row',marginBottom:5,marginLeft:10}}>
                                            <Text style={{fontSize:18}}>{this.state.assetName}</Text>
                                        </View>
                                        <View style={{flexDirection:'row'}}>
                                            <Text style={[styles.wait,{borderColor: this.state.statusShowColor,color: this.state.statusShowColor,width:80,textAlign:'center', }]}>{this.state.statusName}</Text>
                                            {/* <Text style={{color:'#999',textAlign:'center', width:80,marginRight:5}}>资产编号</Text>
                                            <Text style={{color:'#999',width:getScreenWidth()-180}}>{this.state.assetNoShow}</Text> */}
                                        </View>
                                    </View>
                                    <TouchableOpacity onPress={() => this.selectImg()}>
                                        <Image source={this.state.imgPath ? { uri: this.state.imgPath } : require('../images/noimgbig.png')} style={{ resizeMode: 'contain', marginLeft:10,width: getPixel(100), height: getPixel(60) }} />
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style={{ marginTop: getPixel(10) }}>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>型号</Text>
                                    <TouchableOpacity onPress={this.openBrandModelModal.bind(this)}>
                                        <Text style={styles.selectValue}>{this.state.modelName}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={this.openBrandModelModal.bind(this)}>
                                        <Image style={styles.selectIcon} source={require('../images/select.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>类型</Text>
                                    <TouchableOpacity onPress={this.openTypeModal.bind(this)}>
                                        <Text style={styles.selectValue}>{this.state.typeName}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={this.openTypeModal.bind(this)}>
                                        <Image style={styles.selectIcon} source={require('../images/select.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                    </TouchableOpacity>
                                </View>
                                {/* <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>状态</Text>
                                    <TouchableOpacity onPress={this.openReasonModal.bind(this)}>
                                        <Text style={styles.selectValue}>{this.state.statusName}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={this.openReasonModal.bind(this)}>
                                        <Image style={styles.selectIcon} source={require('../images/select.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                    </TouchableOpacity>
                                </View> */}
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>区域位置</Text>
                                    <TouchableOpacity onPress={this.openRoomModal.bind(this)}>
                                        <Text style={styles.selectValue}>{this.state.roomName}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={this.openRoomModal.bind(this)}>
                                        <Image style={styles.selectIcon} source={require('../images/select.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.inputLable}>货架</Text>
                                    <TextInput style={styles.inputValue} placeholder="请输入货架" onChangeText={text => this.handleChange({ location: text })} value={this.state.location} />
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.inputLable}>设备配置</Text>
                                    <TextInput style={styles.inputValue} placeholder="请输入设备配置" onChangeText={text => this.handleChange({ remark: text })} value={this.state.remark} />
                                </View>
                                
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.inputLable}>SN</Text>
                                    <TextInput ref={(input) => this.snInput = input} onFocus={() => this.setInput('serialNo')} onBlur={() => this.setInput('')} style={[styles.inputValue, { width: getScreenWidth() - getPixel(140) }]} placeholder="请输入SN" onChangeText={text => this.handleChange({ serialNo: text })} value={this.state.serialNo} />
                                    {DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                                        <TouchableOpacity onPress={this.openSnScan.bind(this)}>
                                            <Image style={styles.selectIcon} source={require('../images/scanGray.png')} style={{ resizeMode: 'contain', width: getPixel(23), height: getPixel(23) }} />
                                        </TouchableOpacity>
                                        : null}
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.inputLable}>PN</Text>
                                    <TextInput ref={(input) => this.pnInput = input} onFocus={() => this.setInput('pn')} onBlur={() => this.setInput('')} style={[styles.inputValue, { width: getScreenWidth() - getPixel(140) }]} placeholder="请输入PN" onChangeText={text => this.handleChange({ pn: text })} value={this.state.pn} />
                                    {DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                                        <TouchableOpacity onPress={this.openPnScan.bind(this)}>
                                            <Image style={styles.selectIcon} source={require('../images/scanGray.png')} style={{ resizeMode: 'contain', width: getPixel(23), height: getPixel(23) }} />
                                        </TouchableOpacity>
                                        : null}
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.inputLable}>资产编码</Text>
                                    <TextInput autoFocus={true} ref={(input) => this.assetCodeInput = input} onFocus={() => this.setInput('assetNo')} onBlur={() => this.setInput('')} style={[styles.inputValue, { width: getScreenWidth() - getPixel(140) }]} placeholder="请输入资产编码" onChangeText={text => this.handleChange({ assetNo: text })} value={this.state.assetNo} />
                                    {DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                                        <TouchableOpacity onPress={this.openAssetNoScan.bind(this)}>
                                            <Image style={styles.selectIcon} source={require('../images/scanGray.png')} style={{ resizeMode: 'contain', width: getPixel(23), height: getPixel(23) }} />
                                        </TouchableOpacity>
                                        : null}
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.inputLable}>RFID</Text>
                                    <TextInput ref={(input) => this.rfidInput = input} onFocus={() => this.setInput('rfidNo')} onBlur={() => this.setInput('')} style={[styles.inputValue, { width: getScreenWidth() - getPixel(140) }]} placeholder="请输入RFID" onChangeText={text => this.handleChange({ rfidNo: text })} value={this.state.rfidNo} />
                                    {DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                                        <TouchableOpacity onPress={this.openRfidNoScan.bind(this)}>
                                            <Image style={styles.selectIcon} source={require('../images/scanGray.png')} style={{ resizeMode: 'contain', width: getPixel(23), height: getPixel(23) }} />
                                        </TouchableOpacity>
                                        : null}
                                </View>
                            </View>
                            {/* <View style={{ marginTop: getPixel(10) }}>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>区域位置</Text>
                                    <TouchableOpacity onPress={this.openRoomModal.bind(this)}>
                                        <Text style={styles.selectValue}>{this.state.roomName}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={this.openRoomModal.bind(this)}>
                                        <Image style={styles.selectIcon} source={require('../images/select.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                    </TouchableOpacity>
                                </View> */}
                                {/* { this.state.roomType==1?
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>机柜</Text>
                            <TouchableOpacity onPress={this.openRackModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.rackName }</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openRackModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>:null
                        }
                        { this.state.roomType==1?
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.inputLable }>起始U位</Text>
                            <TextInput style={ styles.inputValue} placeholder="请输入起始U位" onChangeText={ text => this.handleChange({ startU: text })}  value={ this.state.startU != 0 ? this.state.startU + '': '' }  />
                        </View>
                        :null
                        } */}
                                {/* <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>管理部门</Text>
                            <TouchableOpacity onPress={this.openManageBranchModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.manageBranchName}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openManageBranchModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>管理人</Text>
                            <TouchableOpacity onPress={this.openManageUserModal.bind(this)}>
                                <Text style={ styles.selectValue }>{this.state.manageUserName}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openManageUserModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View> */}
                                {/* <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>使用人二级单位</Text>
                                    <TouchableOpacity onPress={this.openUseBranchModal.bind(this)}>
                                        <Text style={styles.selectValue}>{this.state.useBranchName}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={this.openUseBranchModal.bind(this)}>
                                        <Image style={styles.selectIcon} source={require('../images/select.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>使用单位IT管理员</Text>
                                    <TouchableOpacity onPress={this.openUseUserModal.bind(this)}>
                                        <Text style={styles.selectValue}>{this.state.endUserName}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={this.openUseUserModal.bind(this)}>
                                        <Image style={styles.selectIcon} source={require('../images/select.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                                    </TouchableOpacity>
                                </View>
                            </View> */}
                            <View style={{ marginTop: getPixel(10) }}>
                                {/* <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>使用人信息</Text>
                                </View> */}
                                
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>使用人员ID</Text>
                                    <TouchableOpacity>
                                        <Text style={styles.selectValue}>{this.state.usePersonId}</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>员工编号</Text>
                                    <TouchableOpacity>
                                        <Text style={styles.selectValue}>{this.state.usePersonNo}</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>中文名</Text>
                                    <TouchableOpacity>
                                        <Text style={styles.selectValue}>{this.state.usePersonName}</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>员工部门</Text>
                                    <TouchableOpacity>
                                        <Text style={styles.selectValue}>{this.state.usePersonDeptName}</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>电话信息</Text>
                                    <TouchableOpacity>
                                        <Text style={styles.selectValue}>{this.state.usePersonPhone}</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </ScrollView>
                        { DeviceInfo.getDeviceId() == 'rk30sdk' ?
                            <View style={styles.buttonGroup}>

                                {/* <TouchableOpacity onPress={find}>
                        <View style={styles.buttonSearch}>
                            <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>查找</Text>
                        </View>
                    </TouchableOpacity>  */}
                                <TouchableOpacity onPress={handleSubmit}>
                                    <View style={styles.buttonSave2}>
                                        <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>保存</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            :
                            <View style={styles.buttonGroup}>
                                <TouchableOpacity onPress={handleSubmit}>
                                    <View style={styles.buttonSave2}>
                                        <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>保存</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        }
                        <Reason data={this.state.moveReasonList} isVisible={this.state.showReasonModal} closeModal={this.closeReasonModal} selectNode={this.selectReason} onRequestClose={this.closeReasonModal} />
                        <BrandModelTree treeData={this.state.brandModeList} isVisible={this.state.showBrandModelModal} closeModal={this.closeBrandModelModal} selectNode={this.selectBrandModel} onRequestClose={this.closeBrandModelModal} />
                        <TypeTree treeData={this.state.typeList} isVisible={this.state.showTypeModal} closeModal={this.closeTypeModal} selectNode={this.selectType} onRequestClose={this.closeTypeModal} />
                        <RoomTree treeData={this.state.roomList} isVisible={this.state.showRoomModal} closeModal={this.closeRoomModal} selectNode={this.selectRoom} onRequestClose={this.closeRoomModal} />
                        {/* <Rack data= {this.state.racks} isVisible = { this.state.showRackModal } closeModal={ this.closeRackModal } selectNode={ this.selectRack } /> */}
                        <BranchTree treeData={this.state.branchList} isVisible={this.state.showManageBranchModal} closeModal={this.closeManageBranchModal} selectNode={this.selectManageBranch} onRequestClose={this.closeManageBranchModal} />
                        <BranchTree treeData={this.state.branchList} isVisible={this.state.showUseBranchModal} closeModal={this.closeUseBranchModal} selectNode={this.selectUseBranch} onRequestClose={this.closeUseBranchModal} />
                        <UserTree treeData={this.state.selectUserList} isVisible={this.state.showManageUserModal} closeModal={this.closeManageUserModal} selectNode={this.selectManageUser} onRequestClose={this.closeManageUserModal} />
                        {/* <UserTree treeData= {this.state.selectUserList} isVisible = { this.state.showUseUserModal } closeModal={ this.closeUseUserModal } selectNode={ this.selectUseUser } onRequestClose={ this.closeUseUserModal }/>   */}
                        <UserSelectModal isVisible={this.state.showUseUserModal} closeModal={this.closeUseUserModal} selectNode={this.selectUseUser} onRequestClose={this.closeUseUserModal} />
                    </SafeAreaView>

                )}
            </Formik>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5',
    },
    header: {
        height: getPixel(50),
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
        flexDirection: 'row',
    },
    formGroup: {
        flexDirection: 'row',
        alignItems: 'center',
        height: getPixel(50),
        backgroundColor: '#FFF',
        paddingLeft: getPixel(10),
        paddingRight: getPixel(10),
    },
    inputLable: {
        fontSize: getPixel(15),
        width: getPixel(90),
        paddingLeft: getPixel(5),
        color: '#333',
    },
    inputValue: {
        fontSize: getPixel(15),
        width: getScreenWidth() - getPixel(115),
    },
    selectLable: {
        fontSize: getPixel(15),
        width: getPixel(90),
        paddingLeft: getPixel(5),
        color: '#333',
    },
    selectValue: {
        fontSize: getPixel(15),
        width: getScreenWidth() - getPixel(135),
    },
    selectIcon: {
        width: getPixel(25),
        alignItems: 'center',
    },
    buttonGroup: {
        flexDirection: 'row',
        paddingLeft: getPixel(15),
        paddingRight: getPixel(15),
        height: getPixel(60), 
        backgroundColor: '#FFF',
        width: getScreenWidth(),
        alignItems: 'center',
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
    },
    buttonSearch: {
        backgroundColor: '#6484FA', 
        height: getPixel(40), 
        borderTopLeftRadius: getPixel(10),
        borderBottomLeftRadius: getPixel(10),
        width: (getScreenWidth() - 30) / 2,
    },
    buttonSave: {
        backgroundColor: '#4a69dd', 
        height: getPixel(40), 
        borderTopRightRadius: getPixel(10),
        borderBottomRightRadius: getPixel(10),
        width: (getScreenWidth() - 30) / 2,
    },
    buttonSave2: {
        backgroundColor: '#4a69dd', 
        height: getPixel(40), 
        borderRadius: getPixel(10),
        width: (getScreenWidth() - 30),
    },
    searchId: {
        backgroundColor: '#4A69DD',
        color: '#FFFFFF',
        // fontSize: '.32rem',
        // borderRadius: '.12rem',
        // padding: '.05rem .2rem'
    },
    idIconSear: {
        // width: '4rem',
        height: '.4rem',
        // display: 'block',
        // marginTop: '.05rem',
        // marginLeft: '.1rem',
        fontStyle: 'normal',
        // background: 'url(../images/searchIcon-02.png) no-repeat',
        // backgroundSize: '100%'
    },
    wait: {
        fontSize: getPixel(14), 
        width: getPixel(60),
        height: getPixel(30),
        borderWidth: 1,
        textAlign: 'center',
        lineHeight: getPixel(30),
        backgroundColor: '#eff3ff',
        borderRadius: 10,
        // fontSize: '.18rem',
        // display: '-webkit-flex',
        // webkitJustifyContent: 'center',
        // webkitAlignItems: 'center',
        // height: '.35rem',
        // paddingHoriontal: 2,
        
        // marginRight: '.1rem',
        // marginTop: '.05rem'
    },
    finish: {
        backgroundColor: 'rgba(238,255,252,1)',
        // borderRadius: '.24rem',
        // border: '1px solid rgba(88,206,182,1)',
        color: '#58CEB6',
        // fontSize: '.18rem',
        // display: '-webkit-flex',
        // webkitJustifyContent: 'center',
        // webkitAlignItems: 'center',
        // height: '.35rem',
        // padding: '0 .1rem',
        // marginRight: '.1rem',
        // marginTop: '.05rem'
    },
    defect: {
        backgroundColor: 'rgb(215, 216, 216)',
        // borderRadius: '.24rem',
        // border: '1px solid rgb(132 134 133)',
        color: '#616161',
        // fontSize: '.18rem',
        // display: '-webkit-flex',
        // webkitJustifyContent: 'center',
        // webkitAlignItems: 'center',
        // height: '.35rem',
        // padding: '0 .1rem',
        // marginRight: '.1rem',
        // marginTop: '.05rem'
    }
});